<template>
  <div class="flex space-x-3 xl:space-x-5 mt-4">
    <Avatar :url="avatar" />
    <div class="reply flex flex-col flex-wrap-reverse w-full max-w-full-calc">
      <textarea
        v-model="commentContent"
        class="w-full rounded-md p-4 focus:outline-none input"
        :placeholder="initialContent"
        cols="30"
        rows="5" />
      <div class="flex justify-between" style="text-align: right">
        <div class='reply-emoji'>
          <Emoji @emojiUrl='handleChange'/>
        </div>
        <div class='reply-control'>
          <button
            @click="saveReply"
            id="submit-button"
            class="mt-5 w-16 text-white p-2 rounded-lg shadow-lg transition transform hover:scale-105 flex float-right">
            <span class="text-center flex-grow commit">回复</span>
          </button>
          <button
            @click="CancelReply"
            id="submit-button"
            class="mt-5 mr-3 w-16 text-white p-2 rounded-lg shadow-lg transition transform hover:scale-105 flex float-right">
            <span class="text-center flex-grow commit">取消</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, getCurrentInstance, inject, computed } from 'vue'
import Avatar from '@/components/Avatar.vue'
import emitter from '@/utils/mitt'
import { useUserStore } from '@/stores/user'
import { useCommentStore } from '@/stores/comment'
import { useAppStore } from '@/stores/app'
import { useRoute } from 'vue-router'
import api from '@/api/api'
import Emoji from '@/components/Emoji/Emoji.vue'
import { emojiUtil } from '@/utils/emojiUtil'
import { ElMessage } from 'element-plus/es'

export default defineComponent({
  components: {
    Emoji,
    Avatar
  },
  props: ['replyUserId', 'initialContent'],
  setup(props, { emit }) {
    const proxy: any = getCurrentInstance()?.appContext.config.globalProperties
    const userStore = useUserStore()
    const commentStore = useCommentStore()
    const appStore = useAppStore()
    const route = useRoute()
    const reactiveData = reactive({
      commentContent: '' as any
    })
    const parentId = inject('parentId')
    const index = inject('index')
    const saveReply = () => {
      if (userStore.userInfo === '') {
        ElMessage({
          message: '请登录后评论!',
          type: 'warning'
        })
        return
      }
      if (reactiveData.commentContent.trim() == '') {
        ElMessage({
          message: '评论不能为空!',
          type: 'warning'
        })
        return
      }
      const path = route.path
      const arr = path.split('/')
      emojiUtil(reactiveData.commentContent).then((value)=>{
        const params: any = {
          type: commentStore.type,
          replyUserId: props.replyUserId,
          parentId: parentId,
          commentContent: value
        }
        params.topicId = arr[2]
        api.saveComment(params).then(({ data }) => {
          if (data.flag) {
            emit('changeShow')
            fetchReplies()
            let isCommentReview = appStore.websiteConfig.isCommentReview
            if (isCommentReview) {
              ElMessage({
                message: '回复成功,正在审核中',
                type: 'warning'
              })
            } else {
              ElMessage({
                message: '回复成功',
                type: 'success'
              })
            }
            reactiveData.commentContent = ''
          } else {
            ElMessage({
              message: data.message,
              type: 'error'
            })
          }
        })
      })
    }
    const fetchReplies = async () => {
      switch (commentStore.type) {
        case 1:
          emitter.emit('articleFetchReplies', index)
          break
        case 2:
          emitter.emit('messageFetchReplies', index)
          break
        case 3:
          emitter.emit('aboutFetchReplies', index)
          break
        case 4:
          emitter.emit('friendLinkFetchReplies', index)
          break
        case 5:
          emitter.emit('talkFetchReplies', index)
      }
    }
    const CancelReply = () => {
      emit('changeShow')
    }
    const handleChange = (value:any,name:any) => {
      reactiveData.commentContent += '['+name+']'
    }
    return {
      ...toRefs(reactiveData),
      avatar: computed(() => userStore.userInfo.avatar),
      saveReply,
      CancelReply,
      handleChange
    }
  }
})
</script>
<style lang="scss" scoped>
.reply::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 8px solid var(--background-primary);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: -8px;
  top: 14px;
}
.input {
  background: var(--background-primary);
  resize: none;
}
#submit-button {
  outline: none;
  background: linear-gradient(135deg, rgb(var(--color-rgb)/0.8), rgb(var(--color-sub-rgb)/0.8));
  box-shadow: 0 0 1rem 0 rgb(var(--color-rgb)/0.2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb)/0.5);
  align-items: center;
}
.wire {
  border-color: var(--text-normal);
}
</style>
